<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px;"
        >
            <el-breadcrumb-item :to="{ path: '/scienceManage/scienceLibraries' }">
                <i class=" el-icon-coin"></i>
                科研库管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{statusValue}}
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="main-container">
            <el-form
                ref="keyankuForm"
                :model="filterForm"
                label-width="100px"
                :rules="keyankuRules"
            >
                <el-row class="row-padding-bottom">
                    <el-col :span="6">
                        <el-form-item
                            label="序号"
                            prop="id"
                        >
                            <el-input
                                v-model="filterForm.id"
                                placeholder="无需填写，系统默认"
                                class="input-form"
                                size="mini"
                                disabled
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="科研库编号"
                            prop="researchLibrariesNumber"
                        >
                            <el-input
                                v-model.trim="filterForm.researchLibrariesNumber"
                                placeholder="请输入科研库编号"
                                class="input-form"
                                size="mini"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="创建时间">
                            <el-date-picker
                                v-model="filterForm.createTime"
                                type="datetime"
                                placeholder="请选择创建时间"
                                size="mini"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @blur="compareCreateTimeStart"
                                class="picker-form"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束时间">
                            <el-date-picker
                                v-model="filterForm.researchLibrariesEndTime"
                                type="datetime"
                                placeholder="请选择结束时间"
                                size="mini"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @blur="compareCreateTimeEnd"
                                class="picker-form"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="24">
                        <el-form-item
                            label="科研负责人"
                            prop="usersIds"
                        >

                            <el-select
                                v-model="filterForm.usersIds"
                                multiple
                                placeholder="请选择科研负责人"
                                clearable
                                size="mini"
                                style="width:100%"
                            >
                                <el-option
                                    v-for="item in usersIdsList"
                                    :key="item.scanId"
                                    :label="item.scanName"
                                    :value="item.scanId"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="24">
                        <el-form-item
                            label="科研库名称"
                            prop="researchLibrariesName"
                        >
                            <el-input
                                v-model.trim="filterForm.researchLibrariesName"
                                placeholder="请输入科研库名称"
                                type="textarea"
                                size="mini"
                                autosize
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="24">
                        <el-form-item
                            label="科研合作单位"
                            prop="researchLibrariesCooperator"
                        >
                            <el-input
                                v-model="filterForm.researchLibrariesCooperator"
                                placeholder="请输入合作单位"
                                type="textarea"
                                size="mini"
                                autosize
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="24">
                        <el-form-item
                            label="备注"
                            prop="researchLibrariesRemark"
                        >
                            <el-input
                                v-model="filterForm.researchLibrariesRemark"
                                placeholder="请输入备注"
                                type="textarea"
                                size="mini"
                                autosize
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="6">
                        <el-form-item label="与课题关联">
                            <el-select
                                v-model="filterForm.isSubjectAssociated"
                                placeholder="请选择"
                                clearable
                                class="picker-form"
                                size="mini"
                            >
                                <el-option
                                    v-for="item in subjectAssociatedList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="6">
                        <el-form-item
                            label="课题编号"
                            prop="subjectNumber"
                        >
                            <el-input
                                v-model="filterForm.subjectNumber"
                                placeholder="请输入科研库课题编号"
                                class="input-form"
                                size="mini"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="课题类别">
                            <el-select
                                v-model="filterForm.subjectCategory"
                                placeholder="请选择课题类别"
                                clearable
                                class="picker-form"
                                size="mini"
                            >
                                <el-option
                                    v-for="item in subjectCategoryList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="课题负责人"
                            prop="subjectPrincipal"
                        >
                            <el-select
                                v-model="filterForm.subjectPrincipal"
                                placeholder="请选择课题负责人"
                                clearable
                                class="picker-form"
                                size="mini"
                            >
                                <el-option
                                    v-for="item in usersIdsList"
                                    :key="item.scanId"
                                    :label="item.scanName"
                                    :value="item.scanId"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="课题经费"
                            prop="subjectCost"
                        >
                            <el-input
                                v-model="filterForm.subjectCost"
                                placeholder="请输入课题经费"
                                class="input-form"
                                size="mini"
                                maxlength="9"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="24">
                        <el-form-item
                            label="课题名称"
                            prop="subjectName"
                        >
                            <el-input
                                v-model="filterForm.subjectName"
                                placeholder="请输入科研库课题名称"
                                type="textarea"
                                size="mini"
                                autosize
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="24">
                        <el-form-item
                            label="课题合作单位"
                            prop="subjectCooperator"
                        >
                            <el-input
                                v-model="filterForm.subjectCooperator"
                                placeholder="请输入课题合作单位"
                                type="textarea"
                                size="mini"
                                autosize
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top:15px">
                    <el-col :span="12">
                        <el-form-item label="课题立项批文">
                            <el-upload
                                :action="imageServiceUploadURL"
                                :on-success="subjectApprovalUrlUploadSuccess"
                                :show-file-list="false"
                                :drag="true"
                            >
                                <img
                                    v-if="filterForm.subjectApprovalUrl"
                                    :src="subjectApprovalUrlPreview"
                                    class="avatar-uploader-img"
                                    alt=""
                                />
                                <i
                                    v-else
                                    class="el-icon-plus avatar-uploader-icon"
                                ></i>
                                <div
                                    slot="tip"
                                    class="el-upload__tip"
                                    style="margin-top: -15px"
                                >
                                    只能上传jpg/png/bmp文件
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="课题申报书">
                            <el-upload
                                :action="imageServiceUploadURL"
                                :on-success="subjectDeclarationUrlUploadSuccess"
                                :show-file-list="false"
                                :drag="true"
                            >
                                <img
                                    v-if="filterForm.subjectDeclarationUrl"
                                    :src="subjectDeclarationUrlPreview"
                                    class="avatar-uploader-img"
                                    alt=""
                                />
                                <i
                                    v-else
                                    class="el-icon-plus avatar-uploader-icon"
                                ></i>
                                <div
                                    slot="tip"
                                    class="el-upload__tip"
                                    style="margin-top: -15px"
                                >
                                    只能上传jpg/png/bmp文件
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col
                        :span="2"
                        :offset="8"
                    >
                        <el-form-item>
                            <el-button
                                type="primary"
                                size="mini"
                                @click="save"
                            >保存</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col
                        :span="2"
                        v-show="!!this.biopsyResearchLibrariesId"
                    >
                        <el-form-item>
                            <el-button
                                type="primary"
                                size="mini"
                                @click="finalize"
                            >结题</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { vxRule } from '@/client/libs/validator';
export default {
    name: 'createScienceLibraries',
    data() {
        return {
            // 图片服务器地址
            imageServiceURL: process.env.ImageServiceURL,
            // 图片服务器上传地址
            imageServiceUploadURL: `${process.env.ImageServiceURL}/upload`,
            biopsyResearchLibrariesId:
                this.$route.query.biopsyResearchLibrariesId,
            statusValue: '',
            filterForm: {
                id: null,
                isSubjectAssociated: '',
                researchLibrariesCooperator: '',
                researchLibrariesNumber: '',
                researchLibrariesName: '',
                researchLibrariesRemark: '',
                subjectApprovalUrl: '', //课题立项批文
                usersIds: [],
                createTime: '',
                researchLibrariesEndTime: '',
                subjectCategory: '',
                subjectCooperator: '', //课题合作单位
                subjectCost: '',
                subjectDeclarationUrl: '', //课题申报书
                subjectName: '',
                subjectNumber: '',
                subjectPrincipal: '',
            },
            dictRequestMap: [
                {
                    code: 'subjectCategory',
                    arrayKey: 'subjectCategoryList',
                },
            ],
            subjectCategoryList: [],
            usersIdsList: [],
            subjectAssociatedList: [
                { id: 0, name: '否' },
                { id: 1, name: '是' },
            ],
            keyankuRules: {
                researchLibrariesName: [
                    vxRule(true, '', 'blur', '请输入科研库名称'),
                ],
                researchLibrariesNumber: [
                    vxRule(true, '', 'blur', '请输入科研库编号'),
                ],
                usersIds: [vxRule(true, null, 'blur', '请输入科研负责人')],
            },
        };
    },
    mounted() {
        if (this.biopsyResearchLibrariesId == null) {
            this.statusValue = '创建';
        } else {
            this.statusValue = '编辑';
            this.filterForm.id = this.biopsyResearchLibrariesId;
            this.getResearchLibrariesInfo(this.biopsyResearchLibrariesId);
        }
        this.dictionariesRequest(); // 获取字典信息
        this.getUsers();
    },
    computed: {
        subjectApprovalUrlPreview() {
            return this.imageServiceURL + this.filterForm.subjectApprovalUrl;
        },
        subjectDeclarationUrlPreview() {
            return this.imageServiceURL + this.filterForm.subjectDeclarationUrl;
        },
    },
    methods: {
        shijiancuo(timeVal) {
            return new Date(Date.parse(timeVal.replace(/-/g, '/'))).getTime();
        },
        compareCreateTimeStart() {
            if (
                this.filterForm.researchLibrariesEndTime != '' &&
                this.shijiancuo(this.filterForm.researchLibrariesEndTime) <
                    this.shijiancuo(this.filterForm.createTime)
            ) {
                this.$message.warning('结束时间应该大于创建时间');
                this.filterForm.createTime = '';
            }
        },
        compareCreateTimeEnd() {
            if (
                this.filterForm.researchLibrariesEndTime != '' &&
                this.shijiancuo(this.filterForm.researchLibrariesEndTime) <
                    this.shijiancuo(this.filterForm.createTime)
            ) {
                this.$message.warning('结束时间应该大于创建时间');
                this.filterForm.researchLibrariesEndTime = '';
            }
        },

        getResearchLibrariesInfo(pId) {
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/biopsyResearchLibraries/get/by/${pId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    Object.keys(this.filterForm).forEach((item) => {
                        this.filterForm[item] = res.data.data[item];
                    });
                }
            });
        },

        save() {
            if (this.filterForm.id == null) {
                if (this.filterForm.researchLibrariesNumber === '') {
                    this.$message.warning('科研库编号不能为空');
                } else if (this.filterForm.researchLibrariesName === '') {
                    this.$message.warning('科研库名称不能为空');
                } else if (this.filterForm.usersIds.length === 0) {
                    this.$message.warning('科研负责人不能为空');
                } else {
                    //创建
                    this.$axios({
                        method: 'PUT',
                        url: '/PROXY-Remote/biopsyResearchLibraries/save',
                        data: this.filterForm,
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success('保存成功');
                            this.$router.push(
                                '/scienceManage/scienceLibraries'
                            );
                        }
                    });
                }
            } else {
                if (this.filterForm.researchLibrariesNumber === '') {
                    this.$message.warning('科研库编号不能为空');
                } else if (this.filterForm.researchLibrariesName === '') {
                    this.$message.warning('科研库名称不能为空');
                } else if (this.filterForm.usersIds.length === 0) {
                    this.$message.warning('科研负责人不能为空');
                } else {
                    //编辑
                    this.$axios({
                        method: 'POST',
                        url: '/PROXY-Remote/biopsyResearchLibraries/update',
                        data: this.filterForm,
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success('更新成功');
                            this.$router.push(
                                '/scienceManage/scienceLibraries'
                            );
                            this.filterForm.id == null;
                        }
                    });
                }
            }
        },
        finalize() {
            this.$axios({
                method: 'POST',
                url: '/PROXY-Remote/biopsyResearchLibraries/update',
                data: {
                    id: this.biopsyResearchLibrariesId, //该科研库的ID
                    isConcluding: 1, //必传1
                },
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success('成功结题');
                    this.$router.push('/scienceManage/scienceLibraries');
                }
            });
        },
        getUsers() {
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/users/searchUserIdAndName/forBiopsyResearchLibraries',
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.usersIdsList = res.data.data;
                }
            });
        },

        // 获取字典信息
        async dictionariesRequest() {
            await this.dictRequestMap.forEach((map) => {
                this.$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/dicts/list',
                    params: {
                        code: map.code,
                        page: 0,
                        size: 99,
                    },
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this[map.arrayKey] = _.clone(res.data.data);
                    }
                });
            });
        },
        // 课题立项批文图片上传
        subjectApprovalUrlUploadSuccess(res) {
            if (res.status === 'success') {
                this.filterForm.subjectApprovalUrl = res.url.slice(
                    res.url.indexOf('_') - 1
                );
            }
        },
        // 课题申报书图片上传
        subjectDeclarationUrlUploadSuccess(res) {
            if (res.status === 'success') {
                this.filterForm.subjectDeclarationUrl = res.url.slice(
                    res.url.indexOf('_') - 1
                );
            }
        },
    },
};
</script>

<style scoped>
.row-padding-bottom {
    padding-bottom: 10px;
}
</style>